<script lang="ts" setup>
import { ref, defineAsyncComponent, reactive, onActivated, onMounted } from 'vue'
import { useActivated } from '@/hooks/useActivated'
import { queryUserInfoDetail } from '@/api/user'
import { getToken } from '@/utils/cache/cookies'
import { OptionsType } from '@/types/interface'
import { useRoute } from 'vue-router'
import { UserAccountType } from '@/types/enum'
const ChargeOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/ChargeOrderTabPane.vue')
)
const BikeTermOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/BikeTermOrderTabPane.vue')
)
const RefundRecordTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/RefundRecordTabPane.vue')
)
const UserCouponTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/UserCouponTabPane.vue')
)
const TimeRentOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/TimeRentOrderTabPane.vue')
)
const BatteryTermOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/BatteryTermOrderTabPane.vue')
)
const BikeModifieldsOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/BikeModifieldsOrderTabPane.vue')
)
const BatterySwapOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/BatterySwapOrderTabPane.vue')
)
const IllegalChargesTabPane = defineAsyncComponent(
  () => import('@/views/personnel/user/tabpane/IllegalChargesTabPane.vue')
)
defineOptions({
  name: 'UserInfo'
})
const route = useRoute()
const userInfo = ref<OptionsType[]>([])
/**
 * 请求用户详情数据
 *
 */
const getUserBaseInfo = async () => {
  try {
    const res = await queryUserInfoDetail({
      userId: route.query.userId as string,
      token: getToken() ?? ''
    })
    if (res.statusCode === '0') {
      userInfo.value = res.data.map((item) => {
        return item
      })
    }
  } catch (error) {
    console.error(error)
  }
}

const changeAccountState = (val: UserAccountType) => {
  if (val == '1') {
    return '正常'
  } else if (val == '0') {
    return '冻结'
  } else {
    return '注销'
  }
}
const selectType = ref<string>(route.query.selectType as string)
const ChargeOrderTabPaneRef = ref<InstanceType<typeof ChargeOrderTabPane> | null>(null)
const BikeTermOrderTabPaneRef = ref<InstanceType<typeof BikeTermOrderTabPane> | null>(null)
const RefundRecordTabPaneRef = ref<InstanceType<typeof RefundRecordTabPane> | null>(null)
const UserCouponTabPaneRef = ref<InstanceType<typeof UserCouponTabPane> | null>(null)
const BatteryTermOrderTabPaneRef = ref<InstanceType<typeof BatteryTermOrderTabPane> | null>(null)
const TimeRentOrderTabPaneRef = ref<InstanceType<typeof TimeRentOrderTabPane> | null>(null)
const BikeModifieldsOrderTabPaneRef = ref<InstanceType<typeof BikeModifieldsOrderTabPane> | null>(
  null
)
const BatterySwapOrderTabPaneRef = ref<InstanceType<typeof BatterySwapOrderTabPane> | null>(null)
const IllegalChargesTabPaneRef = ref<InstanceType<typeof IllegalChargesTabPane> | null>(null)
const handleTabChange = () => {
  switch (selectType.value) {
    case 'charge':
      ChargeOrderTabPaneRef.value?.load()
      break
    case 'bikeShortTerm':
      TimeRentOrderTabPaneRef.value?.load()
      break
    case 'bikepackage':
      BikeTermOrderTabPaneRef.value?.load()
      break
    case 'batterypackage':
      BatteryTermOrderTabPaneRef.value?.load()
      break
    case 'refund':
      RefundRecordTabPaneRef.value?.load()
      break
    case 'bikeModified':
      BikeModifieldsOrderTabPaneRef.value?.load()
      break
    case 'batterySwap':
      BatterySwapOrderTabPaneRef.value?.load()
      break
    case 'userCoupon':
      UserCouponTabPaneRef.value?.load()
      break
    case 'feeChange':
      console.log('handleTabChange')
      IllegalChargesTabPaneRef.value?.load()
      break
    default:
      break
  }
}
const watchParams = reactive({
  userId: route.query.userId,
  phone: route.query.phone
})
const watchParams2 = reactive({
  userId: route.query.userId
})
onActivated(() => {
  watchParams.userId = route.query.userId as string
  watchParams.phone = route.query.phone as string
  watchParams2.userId = route.query.userId as string
})
useActivated(
  watchParams2,
  { watchParams2 },
  [{ key: 'userId', path: 'watchParams2.userId' }],
  getUserBaseInfo,
  ['selectType', 'phone']
)
useActivated(
  watchParams,
  { watchParams },
  [
    { key: 'userId', path: 'watchParams.userId' },
    { key: 'phone', path: 'watchParams.phone' }
  ],
  handleTabChange,
  ['selectType']
)
onMounted(() => {
  getUserBaseInfo()
  handleTabChange()
})
</script>

<template>
  <el-scrollbar>
    <div class="">
      <div class="xy-container__header user-base_info">
        <div class="base-info_title">用户信息</div>
        <div class="base-info_list">
          <div class="base-info_item" v-for="(item, index) in userInfo" :key="index">
            <span class="info-item_title">{{ item.label }}</span>
            <span
              class="info-item_content"
              v-if="item.label == '账号状态'"
              :style="{
                color: item.value === '0' ? 'var(--xy-danger-color)' : 'var(--xy-success-color)'
              }"
              >{{ changeAccountState(item.value as UserAccountType) }}</span
            >
            <span class="info-item_content" v-else>{{ item.value }}</span>
          </div>
        </div>
      </div>
      <div class="xy-container__content user-details_info">
        <el-tabs v-model="selectType" @tab-change="handleTabChange">
          <el-tab-pane label="充值订单" name="charge">
            <charge-order-tab-pane ref="ChargeOrderTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="短租消费" name="bikeShortTerm">
            <time-rent-order-tab-pane ref="TimeRentOrderTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="用户卡券" name="userCoupon">
            <user-coupon-tab-pane ref="UserCouponTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="车辆套餐" name="bikepackage">
            <bike-term-order-tab-pane ref="BikeTermOrderTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="电池套餐" name="batterypackage">
            <battery-term-order-tab-pane ref="BatteryTermOrderTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="中控线材" name="bikeModified">
            <bike-modifields-order-tab-pane ref="BikeModifieldsOrderTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="单次换电" name="batterySwap">
            <battery-swap-order-tab-pane ref="BatterySwapOrderTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="退款记录" name="refund">
            <refund-record-tab-pane ref="RefundRecordTabPaneRef" />
          </el-tab-pane>
          <el-tab-pane label="违规收费" name="feeChange">
            <illegal-charges-tab-pane ref="IllegalChargesTabPaneRef" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="scss">
.user-base_info {
  width: 100%;
  background: #fff;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
  border-radius: 5px 5px 5px 5px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .base-info_title {
    font-size: 20px;
    color: var(--xy-normal-text-color);
    line-height: 28px;
    margin-top: 10px;
  }
  .base-info_list {
    width: 100%;
    margin-top: 18px;
    display: grid;
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, 300px);
    grid-auto-columns: 1fr;
    row-gap: 16px;
    .base-info_item {
      display: flex;
      .info-item_title {
        font-size: 14px;
        color: var(--xy-grey-text-color);
        line-height: 22px;
        margin-right: 16px;
      }
      .info-item_content {
        font-size: 14px;
        color: var(--xy-normal-text-color);
        line-height: 22px;
        font-weight: 500;
      }
    }
  }
}
.user-details_info {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
  border-radius: 5px 5px 5px 5px;
}
</style>
